import React, {Component} from 'react'
import {View, Text, Image, TouchableOpacity, Modal, Platform} from 'react-native'
import styles from '../../config/styles'
import Icon from 'react-native-vector-icons/Ionicons'

var ImagePicker = require('react-native-image-picker');

const options = {
    cancelButtonTitle: '取消',
    mediaType: 'video',
    videoQuality: 'low',
    durationLimit: 300,
    storageOptions: {
      skipBackup: true,
      path: 'images'
    }
}

class VideoSelector extends Component {
    static defaultProps = {
        style: {},
        onFinished: undefined
    }

    showVideo = () => {
        ImagePicker.launchCamera(options, (response)  => {
            
              if (response.didCancel) {
                  console.log('User cancelled image picker');
              }
              else if (response.error) {
                  console.log('ImagePicker Error: ', response.error);
              }
              else if (response.customButton) {
                  console.log('User tapped custom button: ', response.customButton);
              }
              else {
                  if (this.props.onFinished != undefined) {
                      if (Platform.OS == 'ios') {
                        this.props.onFinished(response.uri)                   
                      } else {
                        this.props.onFinished(response.path)                                                
                      }
                  }
            
                // You can also display the image using data:
                // let source = { uri: 'data:image/jpeg;base64,' + response.data };
            
              }
        });
    }

    render () {
        return (
            <TouchableOpacity style={{flex: 1}} onPress={() => {this.showVideo()}}>
                <View style={[{alignItems: 'center', justifyContent: 'center'}, this.props.style]}>
                    <View>
                        <View style={[styles.icon_small_container]}>
                            <View style={{justifyContent: 'center', alignItems: 'center', padding: 11}}>
                                <Icon name={'ios-videocam-outline'} size={30} color={'white'} />
                            </View>
                        </View>
                    </View>
                    <View style={{paddingTop: 10}}>
                        <Text>视频</Text>
                    </View>
                </View>
            </TouchableOpacity>   
        )
    }
}

export default VideoSelector